<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" aaa="hello" :run="run" :hello="this" ref="helloword"/>
    <br/>
    <br/>
    <List></List>
    <Header></Header>
    <hr>
     <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    <button @click="go2Detail()">去detail页面</button>
    <button @click="go2Content()">去content页面</button>
    
    <router-view></router-view>
    
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import List from './components/List.vue'
import Header from './components/header.vue'
export default {
  name: 'app',
  components: {
    HelloWorld,
    List,
    Header,
  },
  methods:{
    run(){
      console.log('run');
    },
    go2Detail(){
      this.$router.push({name:'detail',params: { id: 1 }})
    },
    go2Content(){
      this.$router.push({path:'/content/',query: { id: 1 }})
    }
  },
  mounted(){
    this.$refs.helloword.setValue('父组件传来的值');
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
